<!DOCTYPE html>
<html xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<head>
    <title>jingsi datav libs example</title>
    <script src="./js/vue3.js"></script>
    <script src="../dist/jingsi.datav.js"></script>
    <style>
        html, body {
            overflow: hidden;
        }

        html, body, #app {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #222222;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="app">
    <container class="app-container">
        <!--    {{msg}}-->
        <!--    <hello></hello>-->
        <!--    <data-grid :columns="headers" :rows="rows" :useindex="false">-->
        <!--        <template v-slot:0="slotScope">-->
        <!--            {{slotScope.info.value}} &#45;&#45;-->
        <!--        </template>-->
        <!--&lt;!&ndash;        <template v-slot:1="slotScope">&ndash;&gt;-->
        <!--&lt;!&ndash;            {{slotScope.info.value}} -&#45;&#45;&ndash;&gt;-->
        <!--&lt;!&ndash;        </template>&ndash;&gt;-->
        <!--    </data-grid>-->
        <!--          <count-to :startVal="6" :endVal="123"></count-to>-->
        <!--    <my-count-to :data="234"></my-count-to>-->
        <!--    <h-select :data="selectData"></h-select>-->
        <!--    <v-select :data="selectData"></v-select>-->
        <tab :headers="['1','2']">
            <template v-slot:0>
                1
            </template>
            <template v-slot:1>
                2
            </template>
        </tab>
    </container>
</div>
<script>
    Vue.createApp({
        setup() {
            const data = {
                msg: 'hello',
                selectData: [
                    {
                        name: '1',
                        value: 1
                    },
                    {
                        name: '2',
                        value: 2
                    },
                ],
                headers: [
                    {
                        name: 'field1',
                        field: 'field1',
                        style: {
                            width: '50%'
                        }
                    },
                    {
                        name: 'field2',
                        field: 'field2',
                        style: {
                            width: '50%'
                        }
                    },
                ],
                rows: [
                    {
                        field1: 'field1',
                        field2: 'field2',
                    },
                    {
                        field1: 'field1',
                        field2: 'field2',
                    },
                    {
                        field1: 'field1',
                        field2: 'field2',
                    },
                    {
                        field1: 'field1',
                        field2: 'field2',
                    },
                    {
                        field1: 'field1',
                        field2: 'field2',
                    },
                    {
                        field1: 'field1',
                        field2: 'field2',
                    },
                    {
                        field1: 'field1',
                        field2: 'field2',
                    },
                ]
            };
            return {
                data
            }
        }
    }).use(JingsiDataV).mount('#app')
</script>
</body>
</html>